<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>教材管理系统</title>
    <link rel="stylesheet" href="/element-ui/index.css">
    <link rel="stylesheet" href="/element-ui/fonts/element-icons.css">
    <script src="/element-ui/vue.js"></script>
    <script src="/element-ui/index.js"></script>
    <style>
        html, body, #app {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .el-container {
            height: 100vh;

        }
        .el-aside {
            background: #2d3a4b;
            color: #fff;
            min-width: 160px;
            box-shadow: 2px 0 8px #f0f1f2;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        .menu-title {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 2px;
            background: #263445;
            position: relative;
            overflow: hidden;
        }
        .menu-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #409EFF, transparent);
            animation: shine 2s infinite;
        }
        @keyframes shine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        .el-main {
            padding: 0;
            height: 100%;
            background: #f5f6fa;
        }
        .main-iframe {
            width: 100%;
            height: 100vh;
            min-height: 600px;
            border: none;
            background: #f5f6fa;
            transition: opacity 0.3s ease;
        }
        .main-iframe.fade-enter-active, .main-iframe.fade-leave-active {
            transition: opacity 0.3s;
        }
        .main-iframe.fade-enter, .main-iframe.fade-leave-to {
            opacity: 0;
        }
        .el-menu {
            border-right: none;
            background: #2d3a4b;
            flex: 1;
        }
        .el-menu-item {
            font-size: 16px;
            position: relative;
            transition: all 0.3s ease;
        }
        .el-menu-item:hover {
            transform: translateX(5px);
            background: #263445 !important;
        }
        .el-menu-item i {
            transition: transform 0.3s ease;
        }
        .el-menu-item:hover i {
            transform: scale(1.2);
        }
        .el-menu-item.is-active {
            background: #263445 !important;
        }
        .el-menu-item.is-active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background: #409EFF;
            animation: slideIn 0.3s ease;
        }
        @keyframes slideIn {
            from { transform: scaleY(0); }
            to { transform: scaleY(1); }
        }
        .api-doc-button {
            padding: 20px;
            text-align: center;
            background: #263445;
            border-top: 1px solid #1f2d3d;
        }
        .api-doc-button .el-button {
            width: 100%;
            background: #409EFF;
            border-color: #409EFF;
            color: #fff;
            transition: all 0.3s ease;
        }
        .api-doc-button .el-button:hover {
            background: #66b1ff;
            border-color: #66b1ff;
            transform: translateY(-2px);
        }
        @media (max-width: 800px) {
            .el-aside { 
                min-width: 60px;
                transform: translateX(-100%);
            }
            .el-aside:hover {
                transform: translateX(0);
            }
            .menu-title { 
                font-size: 16px;
                padding: 0 10px;
            }
            .el-menu-item span {
                display: none;
            }
            .el-menu-item i {
                margin-right: 0;
            }
            .api-doc-button .el-button span {
                display: none;
            }
        }
        .aside-user-block {
            margin-top: 40px;
            margin-bottom: 32px;
            padding: 18px 0 0 0;
            border-top: 1px solid #34445a;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #2d3a4b;
        }
        .aside-user-label {
            color: #409EFF;
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px 18px;
            border-radius: 20px;
            background: #233047;
            margin-bottom: 0;
            margin-top: 6px;
            transition: background 0.2s, box-shadow 0.2s;
        }
        .aside-user-label:hover {
            background: #34445a;
            box-shadow: 0 2px 8px rgba(64,158,255,0.10);
        }
        .aside-user-label .el-icon-user-solid {
            font-size: 20px;
        }
        .el-dropdown-menu {
            min-width: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="180px">
            <div class="menu-title">管理菜单</div>
            <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect" background-color="#2d3a4b" text-color="#fff" active-text-color="#409EFF">
                <el-menu-item index="home">
                    <i class="el-icon-house"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <template v-if="userStatus == 1">
                    <el-menu-item index="order">
                        <i class="el-icon-s-order"></i>
                        <span slot="title">订单管理</span>
                    </el-menu-item>
                    <el-menu-item index="book">
                        <i class="el-icon-notebook-2"></i>
                        <span slot="title">教材管理</span>
                    </el-menu-item>
                    <el-menu-item index="user">
                        <i class="el-icon-user"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="publisher">
                        <i class="el-icon-office-building"></i>
                        <span slot="title">出版社管理</span>
                    </el-menu-item>
                    <el-menu-item index="inventory">
                        <i class="el-icon-box"></i>
                        <span slot="title">库存管理</span>
                    </el-menu-item>
                    <el-menu-item index="termbook">
                        <i class="el-icon-date"></i>
                        <span slot="title">学期教材管理</span>
                    </el-menu-item>
                </template>
                <template v-else>
                    <el-menu-item index="order">
                        <i class="el-icon-s-order"></i>
                        <span slot="title">我的订单</span>
                    </el-menu-item>
                </template>
                <template v-if="userStatus == 0">
                    <el-menu-item index="termbook-list-by-user">
                        <i class="el-icon-reading"></i>
                        <span slot="title">学期教材列表</span>
                    </el-menu-item>
                </template>
            </el-menu>
            <div class="aside-user-block">
                <el-dropdown trigger="hover" placement="right-start">
                    <span class="aside-user-label el-dropdown-link">
                        <i class="el-icon-user-solid"></i>
                        <span th:text="${session.user.username}">用户名</span>
                        <i class="el-icon-arrow-right el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <a href="/user/logout" style="color:inherit;text-decoration:none;">退出登录</a>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="api-doc-button">
                <el-button type="primary" @click="openApiDoc">
                    <i class="el-icon-document"></i>
                    <span>API文档</span>
                </el-button>
            </div>
        </el-aside>
        <el-main>
            <iframe class="main-iframe" :src="iframeSrc" frameborder="0"></iframe>
        </el-main>
    </el-container>
</div>
<script th:inline="javascript">
    var userStatus = [[${session.user.status}]];
</script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeMenu: 'home',
                iframeSrc: '/home',
                isTransitioning: false,
                userStatus: typeof userStatus !== 'undefined' ? userStatus : 0
            };
        },
        methods: {
            handleSelect(key) {
                if (this.isTransitioning) return;
                this.isTransitioning = true;
                this.activeMenu = key;
                
                const iframe = document.querySelector('.main-iframe');
                iframe.style.opacity = '0';
                
                setTimeout(() => {
                    switch (key) {
                        case 'home':
                            this.iframeSrc = '/home';
                            break;
                        case 'order':
                            this.iframeSrc = '/order/list';
                            break;
                        case 'book':
                            this.iframeSrc = '/book/list';
                            break;
                        case 'user':
                            this.iframeSrc = '/user/list';
                            break;
                        case 'publisher':
                            this.iframeSrc = '/publisher/list';
                            break;
                        case 'inventory':
                            this.iframeSrc = '/inventory/list';
                            break;
                        case 'termbook':
                            this.iframeSrc = '/termbook/list';
                            break;
                        case 'termbook-list-by-user':
                            this.iframeSrc = '/termbook/listByUser';
                            break;
                    }
                    
                    setTimeout(() => {
                        iframe.style.opacity = '1';
                        this.isTransitioning = false;
                    }, 100);
                }, 300);
            },
            openApiDoc() {
                window.open('http://localhost:8080/swagger-ui/index.html#/', '_blank');
            }
        }
    });
</script>
</body>
</html> 